<template>
	<div>
		<div class="header">
			<div class="header-bar flex-center flex-zBetween">
				<div class="header-left flex-center">
					<div class="logo"><img src="../assets/images/FOOTBALL.png"></div>
					<el-dropdown trigger="click" @command="handleCommand">
						<div class="el-dropdown-sw flex-center">
							<img :src="$t('lang.swIcon')"><span>{{$t('lang.swText')}}</span><i class="el-icon-arrow-down el-icon--right"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item :command="beforeHandleCommand('CN')">
								<div class="drop-flex-item">
									<img src="../assets/images/cn.png"><span>CN</span>
								</div>
							</el-dropdown-item>
							<el-dropdown-item :command="beforeHandleCommand('EN')">
								<div class="drop-flex-item">
									<img src="../assets/images/en.png"><span>EN</span>
								</div>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="header-menu flex-center">
					<div class="menu-item" @click="goUrl('/download')">
						<span class="iconfont icon-xiazai"></span> App下载
					</div>
					<div class="line"></div>
					<div class="menu-item" @click="goUrl('/kefu')">
						<span class="iconfont icon-iconfontkefu"></span> 线上客服xianshangkefu
					</div>
					<div class="line"></div>
					<div class="menu-item" @click="goUrl('/notice')">
						<el-badge :value="5" class="item">
							<span class="iconfont icon-bell"></span>
						</el-badge>
					</div>
					<div class="line"></div>
					<div class="menu-user flex-center" >
						<img src="../assets/images/touxiang.png" @click="goUrl('/ucenter')">
						<span class="us-link" @click="goUrl('/login')">登出dengchu</span>
					</div>
				</div>
			</div>
			<div class="navbar flex-center flex-zBetween">
				<el-menu mode="horizontal" :default-active="$route.path" :router="true" class="el-menu-navbar">
					<el-menu-item index="/">{{$t('nav.nav1')}}</el-menu-item>
					<el-menu-item index="/game">{{$t('nav.nav2')}}</el-menu-item>
					<el-menu-item index="/settlement">{{$t('nav.nav3')}}</el-menu-item>
					<el-menu-item index="/billRecord">{{$t('nav.nav4')}}</el-menu-item>
					<el-menu-item index="/ucenter">{{$t('nav.nav5')}}</el-menu-item>
					<el-menu-item index="/cooperate">{{$t('nav.nav6')}}</el-menu-item>
					<el-menu-item index="/activity">{{$t('nav.nav7')}}</el-menu-item>
					<el-menu-item index="/rule">{{$t('nav.nav8')}}</el-menu-item>
					<el-menu-item index="/recharge">{{$t('nav.nav9')}}</el-menu-item>
					<el-menu-item index="/withdraw">{{$t('nav.nav10')}}</el-menu-item>
				</el-menu>
				<div class="nav-btns">
					<el-button @click="goUrl('/recharge')" type="success">充值chongzhi</el-button>
					<el-button @click="goUrl('/withdraw')" type="primary">提现tixian</el-button>
				</div>
			</div>
		</div>
		<!-- 手机 -->
		<div class="m-placholder">
			<div class="m-nav-bar" v-if="!isIndex">
				<div class="navbar-left" @click="back()">
					<i class="el-icon-arrow-left"></i>
				</div>
				<div class="m-nav-title">
					{{navTitle}}
					<div class="lan-menu">
						<el-dropdown trigger="click" @command="handleCommand">
							<div class="el-dropdown-sw flex-center">
								<img :src="$t('lang.swIcon')"><span>{{$t('lang.swText')}}</span><i class="el-icon-arrow-down el-icon--right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="beforeHandleCommand('CN')">
									<div class="drop-flex-item">
										<img src="../assets/images/cn.png"><span>CN</span>
									</div>
								</el-dropdown-item>
								<el-dropdown-item :command="beforeHandleCommand('EN')">
									<div class="drop-flex-item">
										<img src="../assets/images/en.png"><span>EN</span>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div class="navbar-right" @click="rightClick">
					<span class="text">{{rightText}}</span>
				</div>
			</div>
			<div class="m-nav-bar" v-else>
				<div class="navbar-left" @click="Visible = true">
					<i class="iconfont icon-caidan"></i>
				</div>
				<div class="m-nav-title" >
					<span class="title-lg" @click="Visible = true">FOOTBALL</span><span class="iconfont icon-down"></span>
					<div class="lan-menu">
						<el-dropdown trigger="click" @command="handleCommand">
							<div class="el-dropdown-sw flex-center">
								<img :src="$t('lang.swIcon')"><span>{{$t('lang.swText')}}</span><i class="el-icon-arrow-down el-icon--right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="beforeHandleCommand('CN')">
									<div class="drop-flex-item">
										<img src="../assets/images/cn.png"><span>CN</span>
									</div>
								</el-dropdown-item>
								<el-dropdown-item :command="beforeHandleCommand('EN')">
									<div class="drop-flex-item">
										<img src="../assets/images/en.png"><span>EN</span>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div class="navbar-right" @click="goUrl('/ucenter')">
					<i class="iconfont icon-user"></i>
				</div>
			</div>
		</div>
		<!-- 手机菜单 -->
		<van-popup class="nav-popup" v-model="Visible" position="left" :style="{ height: '100%' }" round closeable>
			<div class="m-navbar">
				<ul class="m-navbar-list">
					<li v-for="(item,index) in $t('mNav')" :key="index" >
						<router-link :to="item.link" class="flex-center" >
							<span class="iconfont" :class="item.icon"></span><span>{{item.text}}</span>
						</router-link>
					</li>
				</ul>
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		name: 'Head',
		props: {
			navTitle: {
				type: String, //key不能乱写
				default: ''
			},
			rightText: {
				type: String, //key不能乱写
				default: ''
			},
			isIndex: {
				type: Boolean, //key不能乱写
				default: false
			},
		},
		data() {
			return {
				swIcon: require('../assets/images/cn.png'),
				swText: 'CN',
				Visible:false,
				navs:[{
					icon:'icon-home',
					text:'首页shouye',
					link:'/'
				},{
					icon:'icon-jiangbei',
					text:'全部赛事quanbusaishi',
					link:'/game'
				},{
					icon:'icon-jiesuan',
					text:'未结算赛事weijiesuansaishi',
					link:'/settlement'
				},{
					icon:'icon-zhangdan',
					text:'账单记录zhangdanjilu',
					link:'/billRecord'
				},{
					icon:'icon-ziliao',
					text:'个人资料gerenziliao',
					link:'/ucenter'
				},{
					icon:'icon-hezuo1',
					text:'合作中心hezuozhongxin',
					link:'/cooperate'
				},{
					icon:'icon-huodong1',
					text:'活动大厅huodongdating',
					link:'/activity'
				},{
					icon:'icon-guize',
					text:'规则说明guizeshuoming',
					link:'/rule'
				},{
					icon:'icon-liucheng',
					text:'充值流程chongzhiliucheng',
					link:'/recharge'
				},{
					icon:'icon-tixian1',
					text:'提现流程tixianliucheng',
					link:'/withdraw'
				},{
					icon:'icon-gongaao',
					text:'公告中心gonggaozhongxin',
					link:'/notice'
				},{
					icon:'icon-zhangdan1',
					text:'赛事资讯onggaozhong',
					link:'/news'
				},{
					icon:'icon-iconfontkefu',
					text:'在线客服zaixiankefu',
					link:'/kefu'
				},]
			};
		},
		methods: {
			handleCommand(command) {
				switch (command.command) {
					case 'CN':
						this.$i18n.locale = "zh"
						break;
					case 'EN':
						this.$i18n.locale = "en"
						break;
					default:
						break;
				}
			},
			beforeHandleCommand(command) {
				return {
					'command': command
				}
			},
			back() {
				this.$router.go(-1)
			},
			goUrl(url){
				this.$router.push(url);
			},
			rightClick() {
				this.$emit('rightClick')
			}

		}

	}
</script>
